<template>
  <div class="index">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 总览 start -->
    <div class="box">
      <!-- 总设备数 -->
      <div
        style="display: flex; flex-direction: row; width: 36%; margin-left: 20%"
      >
        <div class="pic">
          <div class="pic_coler">
            <img
              alt="tiepai"
              class="body-pic"
              src="@/assets/img/ems/total.png"
            />
          </div>
        </div>
        <div class="box-text">
          <div class="body_header">
            <span>总设备数</span>
          </div>
          <div class="body_box">
            <span>{{ oemUserInfo.dsTotalNum || 0 }}</span>
          </div>
          <div class="body-surplus" v-if="oemUserInfo.expires">
            使用期限：{{
              oemUserInfo.expires.slice(0, oemUserInfo.expires.length - 9)
            }}
          </div>
        </div>
      </div>

      <!-- 剩余可用设备数 -->
      <div style="display: flex; flex-direction: row; width: 36%">
        <div class="pic">
          <div class="pic_coler">
            <img
              alt="daili"
              class="body-pic"
              src="@/assets/img/ems/surplus.png"
            />
          </div>
        </div>
        <div class="box-text">
          <div class="body_header">
            <span>剩余可用设备数</span>
          </div>
          <div class="body_box">
            <span>{{
              oemUserInfo.dsTotalNum - oemUserInfo.dsUsedNum || 0
            }}</span>
          </div>
          <div class="body-surplus" v-if="oemUserInfo.expires">
            使用期限：{{
              oemUserInfo.expires.slice(0, oemUserInfo.expires.length - 9)
            }}
          </div>
        </div>
      </div>
    </div>
    <!-- 总览 end -->
    <!-- 行业数据情况 start -->
    <el-card style="margin-top: 20px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="APP">
          <el-select v-model="formInline.appId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.appName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期选择" style="margin-left: 20px">
          <div class="block">
            <el-date-picker
              v-model="timeLine"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="timePick"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button type="primary" @click="queryList">查询</el-button>
        </el-form-item>
      </el-form>
      <div style="font-size: 10px; margin: 10px 0">统计数值为任务参数值</div>
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading.fullscreen.lock="fullscreenLoading"
        >
          <el-table-column align="center" prop="appName" label="APP名称">
          </el-table-column>
          <el-table-column align="center" prop="guanzhu" label="关注">
          </el-table-column>
          <el-table-column align="center" prop="sixin" label="私信">
          </el-table-column>
          <el-table-column align="center" prop="pinglun" label="评论">
          </el-table-column>
          <el-table-column align="center" prop="caiji" label="采集">
          </el-table-column>
          <el-table-column align="center" prop="num" label="触达总数">
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 20px; text-align: center">
          <el-pagination
            @current-change="handleCurrentChange"
            :page-size="8"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <div class="card-title">全球大数据</div>
      </div>
      <!-- 列表 -->
      <div
        style="display: flex; justify-content: space-between; flex-wrap: wrap"
      >
        <div
          class="list"
          v-show="AccountList.length !== 0"
          v-for="(item, index) in AccountList.slice(
            (currentPage - 1) * 4,
            currentPage * 4
          )"
          :key="index"
        >
          <div class="list-header">
            <span
              style="
                width: 30%;
                border-right: 1px solid #d9d9d9;
                font-weight: 700;
                color: #1074fd;
              "
              >APP</span
            >
            <span
              style="
                width: 35%;
                border-right: 1px solid #d9d9d9;
                font-weight: 700;
                color: #1074fd;
              "
              >地区名称</span
            >
            <span style="width: 35%; font-weight: 700; color: #1074fd"
              >账号数量</span
            >
          </div>
          <div style="display: flex">
            <div class="list-left">
              <div style="display: table-cell; vertical-align: middle">
                <img style="height: 120px; width: 120px" :src="item.logo" />
                <div>{{ item.appName }}</div>
              </div>
            </div>
            <div style="width: 70%; height: 306px; overflow: auto">
              <div class="list-right" v-for="i in item.records" :key="i.id">
                <span class="list-item-left">{{ i.countryName }}</span>
                <span class="list-item-right">{{ i.count }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="noneList" v-if="AccountList.length === 0">暂无数据</div>
      </div>

      <!-- 分页 -->
      <div style="text-align: center">
        <el-pagination
          :page-size="4"
          :pager-count="5"
          layout="total, prev, pager, next"
          :total="AccountList.length"
          @prev-click="paginationPrevClick"
          @next-click="paginationNextClick"
          @current-change="paginationNextChange"
        ></el-pagination>
      </div>
      <div style="color: #1074fd; font-size: 18px; margin-top: 30px">
        关键词查询
      </div>
      <div style="margin-top: 30px">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="APP">
            <el-select v-model="appValue" placeholder="活动区域">
              <el-option
                v-for="item in appList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="语言">
            <el-select v-model="languageValue" placeholder="活动区域">
              <el-option
                v-for="item in languageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="tradeValue" placeholder="活动区域">
              <el-option
                v-for="item in tradeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" @click="onClear">清空</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div style="color: #999999; font-size: 12px">仅显示前100条</div>
        <el-table :data="tableDataKey" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="300px"
          >
          </el-table-column>
          <el-table-column prop="keyWord" label="关键词" align="center">
          </el-table-column>
          <el-table-column prop="totalCount" label="数据数量" align="center">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange1"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 行业数据情况 end -->
  </div>
</template>

<script>
import API from "@/network/api/emsApi";
import { createSign } from "@/utils/sign.js";
import { mapState } from "vuex";

import ModuleTitle from "@/components/content/ModuleTitle.vue";

export default {
  name: "index",
  data() {
    return {
      fullscreenLoading: false,
      timeLine: [+new Date(), +new Date() + 24 * 60 * 60 * 1000],
      tableData: [],
      tableDataKey: [],
      tableDataKeyCE: [],
      languageList: [],
      options: [],
      moduleTitle: "概况统计",
      AccountList: [], // 行业数据列表
      currentPage: 1, // 当前页码
      // 条件查询参数
      AccountQueryForm: {
        appName: "",
        industryName: "",
      },
      // 公共参数
      publicForm: {
        timestamp: "",
      },
      publicForm1: {
        timestamp: "",
      },
      formInline: {
        organId: "",
        etime: new Date(
          new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1
        ).getTime(),
        ctime: new Date(
          new Date(new Date().toLocaleDateString()).getTime()
        ).getTime(),
        appId: 0,
        pageSize: 8,
        pageNum: 1,
        sign: "",
        timestamp: 0,
      },
      total: 0,
      keyForm: {
        pageNum: 1,
        pageSize: 10,
        appId: "",
        languageId: "",
        countryId: "",
        industryId: "",
      },
      appList: [], // app列表
      tradeList: [], // 行业列表,
      appValue: "",
      tradeValue: "",
      languageValue: "",
      totalCount: 0,
      hah: null,
    };
  },
  created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.getAccountQuery();
    this.getAppAndMissionList();
    this.queryList();
    this.keyList();
    this.queryLanguage();
    this.getAppTradeInfo();
  },
  computed: {
    ...mapState(["oemUserInfo"]),
  },

  methods: {
    async keyList() {
      console.log("12312312");
      API.queryAccountByKeyWord(this.keyForm).then((res) => {
        console.log(res);
        this.tableDataKey = res.data.data.list;
        this.totalCount = res.data.data.totalCount;
      });
    },
    timePick() {
      this.formInline.ctime = this.timeLine[0].getTime();
      this.formInline.etime = this.timeLine[1].getTime();
    },
    // 查询app列表
    async getAppAndMissionList() {
      await API.getAppAndMissionList({}).then((res) => {
        if (res.data.code === 0) {
          this.options = res.data.data;
          this.options.splice(0, 1);
          const item = {
            appName: "全部",
            id: 0,
          };
          this.options.unshift(item);
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },
    // 查询app和企业
    async getAppTradeInfo() {
      this.publicForm1.timestamp = +new Date();
      if (this.publicForm1.sign) {
        delete this.publicForm1.sign;
      }
      this.publicForm1.sign = createSign(
        JSON.stringify({
          ...this.publicForm1,
        })
      );
      await API.getAppTradeInfo({
        ...this.publicForm1,
      }).then((res) => {
        if (res.data.code === 0) {
          let arr = res.data.data;
          for (let i = 1; i < arr.appList.length; i++) {
            let temp = {};
            temp.value = arr.appList[i].id;
            temp.label = arr.appList[i].name;
            this.appList.push(temp);
          }
          for (let k in arr.industryList) {
            let temp = {};
            temp.value = arr.industryList[k].id;
            temp.label = arr.industryList[k].name;
            this.tradeList.push(temp);
          }
          // const item = {
          //   label: '全部',
          //   value: 0
          // }
          // this.tradeList.unshift(item)
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },
    // 语言
    async queryLanguage() {
      const singTime = {
        timestamp: +new Date(),
      };
      const sign = createSign(
        JSON.stringify({
          ...singTime,
        })
      );
      const languageSearch = {
        timestamp: singTime.timestamp,
        sign: sign,
      };
      await API.queryLanguage({
        ...languageSearch,
      }).then((res) => {
        for (let i = 0; i < res.data.data.length; i++) {
          let cityCurrent = {};
          cityCurrent.value = res.data.data[i].id;
          cityCurrent.label = res.data.data[i].name;
          this.languageList.push(cityCurrent);
        }
      });
    },
    async queryList() {
      this.fullscreenLoading = true;
      this.formInline.timestamp = +new Date();
      delete this.formInline.sign;
      this.formInline.organId = JSON.parse(
        localStorage.getItem("updateUserInfo")
      ).organId;
      this.formInline.sign = createSign(
        JSON.stringify({
          ...this.formInline,
        })
      );
      await API.queryList({
        ...this.formInline,
      }).then((res) => {
        if (res.data.data) {
          this.tableData = res.data.data.object;
          this.tableData.forEach((item, index) => {
            if (item.appName === "八爪鱼") {
              this.tableData.splice(index, 1);
            }
          });
          this.total = res.data.data.totalCount;
        } else {
          this.tableData = [];
        }
        this.fullscreenLoading = false;
      });
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.queryList();
    },
    handleCurrentChange1(val) {
      this.keyForm.pageNum = val;
      this.keyList();
    },
    /**
     * 逻辑
     */
    onSubmit() {
      this.keyForm.languageId = this.languageValue;
      this.keyForm.appId = this.appValue;
      this.keyForm.industryId = this.tradeValue;
      this.keyList();
    },
    onClear() {
      this.keyForm.languageId = this.languageValue = "";
      this.keyForm.appId = this.appValue = "";
      this.keyForm.industryId = this.tradeValue = "";
      this.keyList();
    },
    // 条件查询行业
    queryBtnClick() {
      this.queryTrade();
    },

    // 清空查询条件
    clearQueryData() {
      this.AccountQueryForm.appName = "";
      this.AccountQueryForm.industryName = "";
      this.getAccountQuery();
    },

    // 分页
    paginationPrevClick(page) {
      this.currentPage = page;
    },
    paginationNextClick(page) {
      this.currentPage = page;
    },
    paginationNextChange(page) {
      this.currentPage = page;
    },

    /**
     * 网络请求
     */

    // 查询行业数据
    async getAccountQuery() {
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.organId) {
        delete this.publicForm.organId;
      }
      this.publicForm.organId = this.currentUserInfo.organId;
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
        })
      );
      await API.getAccountQuery().then((res) => {
        if (res.data.code === 0) {
          const test = [];
          for (const key in res.data.data) {
            const temp = {
              appName: "",
              records: [],
              logo: "",
            };
            temp.appName = key;
            temp.records = res.data.data[key];
            temp.logo = res.data.data[key][0].logo;
            test.push(temp);
          }
          this.AccountList.forEach((item, index) => {
            if (
              item.appName === "YouTube" ||
              item.appName === "Facebook" ||
              item.appName === "Tiki"
            ) {
              this.AccountList.splice(index);
            }
          });
          this.AccountList = test;
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },

    async queryTrade() {
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.organId) {
        delete this.publicForm.organId;
      }
      this.publicForm.organId = this.currentUserInfo.organId;
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
          ...this.AccountQueryForm,
        })
      );
      await API.getAccountQuery({
        ...this.publicForm,
        ...this.AccountQueryForm,
      }).then((res) => {
        if (res.data.code === 0) {
          this.AccountList = [];
          for (const key in res.data.data) {
            let temp = {};
            temp.appName = key;
            temp.records = res.data.data[key];
            temp.logo = res.data.data[key][0].logo;
            this.AccountList.push(temp);
          }
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },
  },
  components: {
    ModuleTitle,
  },
};
</script>

<style scoped>
.card-title {
  color: #1074fd;
  font-size: 18px;
  margin-bottom: 14px;
}

/* 总览 */
.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  width: 100%;
  margin-bottom: 10px;
  padding: 37px 0 43px;
  border-radius: 5px;
}
.pic {
  width: 35%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}
.pic_coler {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}
.body-pic {
  width: 100px;
  height: 100px;
}
.box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}
.body_header {
  color: #4d4d4d;
  font-size: 18px;
  text-align: center;
}
.body_box {
  font-size: 22px;
  text-align: center;
  color: #333333;
  font-weight: bold;
  margin-top: 13px;
  margin-bottom: 5px;
  border-bottom: 1px #c6c6c6 solid;
}
.body-surplus {
  color: #999999;
  font-size: 16px;
}

/* 搜索 */
.query {
  display: flex;
  margin-bottom: 50px;
}
.query-button {
  border-radius: 4px;
  background-color: #1074fd;
  color: #fff;
}
.clear-button {
  border-radius: 4px;
  background-color: #fff;
  color: #666666;
}

/* 列表 */
.list {
  position: relative;
  width: 48%;
  height: 356px;
  margin-bottom: 40px;
  border: 1px solid #d9d9d9;
}
.noneList {
  position: relative;
  width: 100%;
  height: 356px;
  margin: 0 auto 40px;
  text-align: center;
  line-height: 356px;
  font-size: 30px;
}
.list-header {
  display: flex;
  height: 50px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
}
.list-left {
  display: table;
  width: 30%;
  height: 306px;
  text-align: center;
  border-right: 1px solid #d9d9d9;
  color: #4d4d4d;
  font-size: 14px;
}
.list-right {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
}
.list-item-left {
  flex: 1;
  border-right: 1px solid #d9d9d9;
  color: #4d4d4d;
  font-size: 14px;
}
.list-item-right {
  flex: 1;
  color: #4d4d4d;
  font-size: 14px;
}
</style>
